<style lang="less" scoped>
@import "./index.less";
</style>
<template>
    <!-- <div
        style="-webkit-font-smoothing: antialiased;text-transform: capitalize;"
        class="w-screen h-screens"
    >
        <v-header></v-header> -->
        <div class="sx-container">
            <div class="bg-banner" w="full">
                <div class="banner-banner">
                    <div class="text-contents">
                        <div class="text">
                            <span class="first">赴美签证</span>
                            <span>全面开放</span>
                        </div>
                        <div class="text-btn">
                            <div class="block yellow">
                                <span>北京</span>
                                <span>上海</span>
                                <span>广州</span>
                                <span>沈阳</span>
                            </div>
                            <div class="block blue">
                                <span>全国领区</span>
                                <span>同步开放</span>
                            </div>
                        </div>
                    </div>
                </div>
                <home-search class="search-content"></home-search>
            </div>
            <div class="visa-contents">
                <div class="visa-list flex justify-center items-center">
                    <div class="visa-item flex-1">
                        <h1>黑科技办签</h1>
                        <p>上上签采用技术手段解决传统签证办理痛点，简化资料提交流程，办签流程实时追踪，实现办签业务全面线上化。小程序随时随地云接单，办签资料一键分享，为同业提供一键式办签体验。</p>
                    </div>
                    <div class="bg-mofang flex-1"></div>
                </div>
                <div class="bussiness backdrop-brightness-50 bg-opacity-20">
                    <div class="header pt-46px">
                        <p class="text-title">办理业务</p>
                        <p class="text-desc">Handle the business</p>
                    </div>
                    <div class="content flex justify-center items-center">
                        <div class="item">
                            <p class="title">
                                20000
                                <strong>+</strong>
                            </p>
                            <p class="desc">合作同业</p>
                        </div>
                        <div class="item flex-1">
                            <p class="title">
                                10000000
                                <strong>+</strong>
                            </p>
                            <p class="desc">出签本数</p>
                        </div>
                        <div class="item flex-1">
                            <p class="title">
                                78
                                <strong>个</strong>
                            </p>
                            <p class="desc">国家覆盖</p>
                        </div>
                        <div class="item flex-1">
                            <p class="title">
                                67
                                <strong>项</strong>
                            </p>
                            <p class="desc">发明专利</p>
                        </div>
                    </div>
                </div>
                <div class="serve">
                    <div class="serve-title">
                        <p class="write-vertical-left">
                            一
                            站
                            式
                            专
                            业
                            服
                            务
                        </p>
                    </div>
                    <div class="content">
                        <div class="serve-list">
                            <div class="serve-item active">
                                <img src="@/assets/image/safe.png" />
                                <p class="title">资料快捷提交</p>
                                <p class="desc">上传、增补资料在线完并智能填表，免去来回邮寄，还可转发给顾客自行上传</p>
                            </div>
                            <div class="serve-item">
                                <img src="@/assets/image/safe.png" />
                                <p class="title">免费拍摄签证照片</p>
                                <p class="desc">小程序拍摄并智能生成标准签证照，不用跑照相馆</p>
                            </div>
                            <div class="serve-item">
                                <img src="@/assets/image/safe.png" />
                                <p class="title">一键转发给顾客</p>
                                <p class="desc">办签要求在线更新不过时，小程序一键发给顾客查看</p>
                            </div>
                            <div class="serve-item">
                                <img src="@/assets/image/safe.png" />
                                <p class="title">随时随地跟踪订单</p>
                                <p class="desc">审核、出签、发货状态实时更新和提醒</p>
                            </div>
                            <div class="serve-item">
                                <img src="@/assets/image/safe.png" />
                                <p class="title">1对1专家服务</p>
                                <p class="desc">数十名资深签证专家1对1服务7*12小时实时响应</p>
                            </div>
                            <div class="serve-item">
                                <img src="@/assets/image/safe.png" />
                                <p class="title">无缝对接 顺丰包邮</p>
                                <p class="desc">一键呼顺丰上门取件，出签包回邮，快捷安全</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="client">
                    <h1>客户案例</h1>
                    <div class="client-list">
                        <div class="client-item active">
                            <div>
                                <img src="@/assets/image/home.png" />
                                <p class="title">旅行社</p>
                            </div>
                            <p
                                class="desc"
                            >湖南省宝中旅游，采用连锁加盟、产销分离、统一采购、资源管理模式，突破传统旅行社的规模瓶颈，开启互联网+，通过大数据分析与整合提升效益及用户体验度。</p>
                        </div>
                        <div class="client-item">
                            <div>
                                <img src="@/assets/image/pen.png" />
                                <p class="title">定制游</p>
                            </div>
                            <p
                                class="desc"
                            >海豚哆哆以高端海岛游为切入口，目前业务已经渗透到澳大利亚、新西兰、欧洲等全球各地。倡导精神旅行，提供蜜月度假、家庭出游、私人旅行定制服务。</p>
                        </div>
                        <div class="client-item">
                            <div>
                                <img src="@/assets/image/OTA.png" />
                                <p class="title">OTA</p>
                            </div>
                            <p
                                class="desc"
                            >轻刻旅行团队致力成为贯通线上线下的综合旅行服务提供商，为用户提供契合需求组的优质旅行服务，目前建立了围绕出行管家服务、数据和智能IT系统、资源对接管理的核心体系，实现北半球目的地全覆盖。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="visa-study">
            <div class="visa-container">
                <p class="title">签证知识</p>
                <div class="visa-study-list">
                    <div class="item">
                        <div class="text">
                            <p class="btn-desc">最新资讯</p>
                            <p class="desc">最新使馆政策</p>
                        </div>
                        <div>
                            <img src="@/assets/image/p1.png" />
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">
                            <p class="btn-desc">最新资讯</p>
                            <p class="desc">最新使馆政策</p>
                        </div>
                        <div>
                            <img src="@/assets/image/p1.png" />
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">
                            <p class="btn-desc">最新资讯</p>
                            <p class="desc">最新使馆政策</p>
                        </div>
                        <div>
                            <img src="@/assets/image/p1.png" />
                        </div>
                    </div>
                    <div class="item">
                        <div class="text">
                            <p class="btn-desc">最新资讯</p>
                            <p class="desc">最新使馆政策</p>
                        </div>
                        <div>
                            <img src="@/assets/image/p1.png" />
                        </div>
                    </div>
                </div>
                <div class="news-content">
                    <div class="recommend">
                        <p class="news-title">推荐</p>
                        <div class="news-list">
                            <div class="item">
                                <img src="@/assets/image/hua.png" />
                                <div class="text-content">
                                    <p class="desc1">重磅！上上签与柬埔寨外交部达成战略合作</p>
                                    <p class="desc">上上签同业签证平台与柬埔寨外交部(MFAIC)的电子签证系统达成战略合作，成为柬埔寨在…</p>
                                    <p class="time">2021-12-10 10:11:49</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/image/hua.png" />
                                <div class="text-content">
                                    <p class="desc1">重磅！上上签与柬埔寨外交部达成战略合作</p>
                                    <p class="desc">上上签同业签证平台与柬埔寨外交部(MFAIC)的电子签证系统达成战略合作，成为柬埔寨在…</p>
                                    <p class="time">2021-12-10 10:11:49</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/image/hua.png" />
                                <div class="text-content">
                                    <p class="desc1">重磅！上上签与柬埔寨外交部达成战略合作</p>
                                    <p class="desc">上上签同业签证平台与柬埔寨外交部(MFAIC)的电子签证系统达成战略合作，成为柬埔寨在…</p>
                                    <p class="time">2021-12-10 10:11:49</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="@/assets/image/hua.png" />
                                <div class="text-content">
                                    <p class="desc1">重磅！上上签与柬埔寨外交部达成战略合作</p>
                                    <p class="desc">上上签同业签证平台与柬埔寨外交部(MFAIC)的电子签证系统达成战略合作，成为柬埔寨在…</p>
                                    <p class="time">2021-12-10 10:11:49</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hot">
                        <p class="news-title">最热</p>
                        <div class="hot-content">
                            <ul>
                                <li>
                                    <p>重磅！上上签与柬埔寨外交部达成战略合作</p>
                                </li>
                                <li>
                                    <p>重磅！上上签与柬埔寨外交部达成战略合作</p>
                                </li>
                                <li>
                                    <p>重磅！上上签与柬埔寨外交部达成战略合作</p>
                                </li>
                                <li>
                                    <p>重磅！上上签与柬埔寨外交部达成战略合作</p>
                                </li>
                                <li>
                                    <p>重磅！上上签与柬埔寨外交部达成战略合作</p>
                                </li>
                                <li>
                                    <p>重磅！上上签与柬埔寨外交部达成战略合作</p>
                                </li>
                                <li>
                                    <p>重磅！上上签与柬埔寨外交部达成战略合作</p>
                                </li>
                                <li>
                                    <p>重磅！上上签与柬埔寨外交部达成战略合作</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="about-us">
            <div class="us-banner">
                <p class="title">关于我们</p>
                <p
                    class="desc text-center"
                >上上签是国内首创同业智能便捷办签平台，致力于运用技术手段，提升签证行业效率，打造一键式办签体验。通过全面实现签证办理流程电子化、智能化来解决传统签证行业办理痛点，为同业旅行社和终端用户都提供了极大的便利。</p>
                <el-button plain>查看详情</el-button>
            </div>
        </div>
        <!-- <v-footer></v-footer>
    </div> -->
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, watch, watchEffect, getCurrentInstance, onBeforeMount } from "vue";
import header from "@/components/global/header.vue";
import footer from "@/components/global/footer.vue";
import homeSearch from '@/components/global/homeSearch.vue';
export default {
    components: {
        vHeader: header,
        vFooter: footer,
        homeSearch,
    },
    setup() {
        const getImage = (name) => {
            return new URL(`/assets/image/${name}.png`, import.meta.url).href
        }

        onBeforeMount(() => {
        })
        return { getImage };
    }
}
</script>
<route lang="yaml">
  meta:
    level: 1
    name: 'Home'
    str: '首页'
    layout: default
</route>